<template>
	<el-collapse class="el_collapse">
		<div class="collapse_item">
			<el-collapse-item name="1" class="collapse_item_item">
				<!-- 头部 标题 -->
				<template #title="isActive">
					<div :class="['title-wrapper', { 'is-active': isActive }]">
						<div class="text_block">
							<el-divider direction="vertical" class="divider_vertical" />
							<div class="title_text">{{ title }}</div>
							<div class="icon_block flex_block">
								<el-icon v-show="isActive"><ArrowDown /></el-icon>
								<el-icon v-show="!isActive"><ArrowRight /></el-icon>
							</div>
							<el-divider />
						</div>
					</div>
				</template>
				<!-- 把原先的icon给去掉 -->
				<template #icon>
					<div></div>
				</template>
				<!-- 内容 -->
				<slot name="main"></slot>
			</el-collapse-item>
		</div>
	</el-collapse>
</template>

<script setup >
defineOptions({
	name: 'MyCllapse',
})
const props = defineProps({
	title: String,
})
</script>
<style scoped lang="scss">
.el_collapse {
	width: 97%;
}
:deep(.el-collapse-item__header) {
	border-bottom: none !important;
}
:deep(.el-collapse-item__wrap) {
	border-bottom: none !important;
}
:deep(.el-collapse-item__title) {
	flex: none;
	width: 100%;
}
.collapse_item {
	display: flex;
	width: 100%;
	.collapse_item_item {
		width: 100%;
	}
}
.text_block {
	font-size: 16px;
	display: flex;
	align-items: center;
	width: 100%;
}
.divider_vertical {
	width: 2px;
	border-left: 2px var(--el-color-primary) var(--el-border-style);
	margin-right: 2px;
}
.title_text {
	white-space: nowrap;
}
.flex_block {
	display: flex;
	align-items: center;
}
.icon_block {
	padding: 0 10px;
	font-size: 12px;
	font-weight: 100;
}
.img_block {
	width: 24px;
	height: 24px;
	img {
		width: 100%;
		height: 100%;
	}
}
</style>